<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="description" content="">
		<meta name="author" content="">
		<title>ORISPER-MALL</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
		<link rel="stylesheet" href="fonts/font-slider.css" type="text/css">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<script src="js/jquery-2.1.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/common.js" ></script>
		<script src="js/product.js"></script>
		<script type="text/javascript" src="js/head.js" ></script>
	</head>

	<body>
		<!--Top-->
		<div id='head'></div>
		<!--//////////////////////////////////////////////////-->
		<!--///////////////////Product Page///////////////////-->
		<!--//////////////////////////////////////////////////-->
		<div id="page-content" class="single-page">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<ul class="breadcrumb">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="category.html">Category</a>
							</li>
							<li>
								<a href="#">Products</a>
							</li>
						</ul>
					</div>
				</div>
				<div id="sidebar" class="col-lg-3">
					<!--<div class="widget wid-categories">
						<div class="heading"><h4>CATEGORIES</h4></div>
						<div class="content">
							<ul>
								<li><a href="#">METAL MACHINERY</a></li>
								<li><a href="#">PACKAGING MACHINERY</a></li>
								<li><a href="#">OTHER MACHINERY</a></li>
							</ul>
						</div>
					</div>-->
					<div class="widget wid-discouts">
						<div class="heading">
							<h4>ASSOCIATED</h4></div>
						<div class="content">
							<div class="caption">
					<!--		    <a id="aUrl5" href="product.html">
								   <img id="mainUrl5" src="images/upload/20161222/2c0922e14ecc46bbae8f91724008c470.jpg" />
							    </a>
							    <div class="name">
									<a id="prodName" href="product.html">
										Aliquam erat volutpat
									</a>
							    </div>-->
								
							</div>
							<div class="caption">
<!--							    <a id="aUrl5" href="product.html">
								   <img id="mainUrl5" src="images/upload/20161222/2c0922e14ecc46bbae8f91724008c470.jpg" />
							    </a>
							    <div class="name">
									<a id="prodName" href="product.html">
										Aliquam erat volutpat
									</a>
							    </div>-->
								
							</div>
						</div>
					</div>
					<!--<div class="widget wid-brand">
						<div class="heading"><h4>BRAND</h4></div>
						<div class="content">
							<label class="checkbox"><input type="checkbox" name="brand">Nokia</label>
							<label class="checkbox"><input type="checkbox" name="brand">Samsung</label>
							<label class="checkbox"><input type="checkbox" name="brand">Iphone</label>
							<label class="checkbox"><input type="checkbox" name="brand">HTC</label>
							<label class="checkbox"><input type="checkbox" name="brand">Oppo</label>
							<label class="checkbox"><input type="checkbox" name="brand">Kings</label>
							<label class="checkbox"><input type="checkbox" name="brand">Zumba</label>	
						</div>
					</div>-->

				</div>
				<div class="row">
					<div id="main-content" class="col-md-8">
						<div class="product">
							<div class="col-md-6">
								<div class="image">
									<img id="mainUrl" src="images/loading.gif" />
									<div class="image-more">
										<ul class="row">
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img id="imgUrl1" class="img-responsive" src="images/loading.gif" ></a>
											</li>
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img id="imgUrl2" class="img-responsive" src="images/loading.gif" ></a>
											</li>
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img id="imgUrl3" class="img-responsive" src="images/loading.gif" ></a>
											</li>
											<li class="col-lg-3 col-sm-3 col-xs-4">
												<a href="#"><img id="imgUrl4" class="img-responsive" src="images/loading.gif" ></a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="caption">
									<div id="productName" class="name">
										<h3></h3>
									</div>
									<!--<div class="info">
										<ul>
											<li>Brand: text</li>
											<li>ID: 0122222</li>
										</ul>
									</div>-->
									<div id="price" class="price">
										$122<span>$98</span>
									</div>
									<div class="options">
										AVAILABLE OPTIONS
										<select>
											<option value="" selected>----Please Select----</option>
											<option value="red">RED</option>
											<option value="black">BLACK</option>
										</select>
									</div>
<!--									<div class="well"><label>Qty: </label> <input class="form-inline quantity" type="text" value="1">
										<a href="#" class="btn btn-2 ">ADD</a>
									</div>-->
									<!--<div class="share well">
										<strong style="margin-right: 13px;">Share :</strong>
										<a href="#" class="share-btn" target="_blank">
											<i class="fa fa-twitter"></i>
										</a>
										<a href="#" class="share-btn" target="_blank">
											<i class="fa fa-facebook"></i>
										</a>
										<a href="#" class="share-btn" target="_blank">
											<i class="fa fa-linkedin"></i>
										</a>
									</div>-->
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="product-desc">
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#description">Description</a>
								</li>
								<li>
									<a href="#params">Params</a>
								</li>
								<li>
									<a href="#faq">Faq</a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="description" class="tab-pane fade in active">
						
								</div>
								<div id="params" class="tab-pane fade">
									<table class="table">
										<thead>
											<tr>
												<th>PARAMS</th>
												<th>VALUES</th>
											</tr>
										</thead>
										<tbody id="paramKeyValue">
											
										</tbody>
									</table>

								</div>
								<div id="faq" class="tab-pane fade">
									
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
		<footer>
			<div id='foot'></div>
		</footer>

		<!-- IMG-thumb -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

		<script>
			$(document).ready(function() {
				$(".nav-tabs a").click(function() {
					$(this).tab('show');
				});
				$('.nav-tabs a').on('shown.bs.tab', function(event) {
					var x = $(event.target).text(); // active tab
					var y = $(event.relatedTarget).text(); // previous tab
					$(".act span").text(x);
					$(".prev span").text(y);
				});
			});
		</script>
	</body>

</html>